import QtQuick 2.15
import QtQuick.Window 2.15

import QtQuick.Controls 2.3
import Qt5Compat.GraphicalEffects//在 QT 6 中，QtGraphicalEffects 模块的导入方式发生了变化。你需要在 QML 文件中使用新的导入语句
//import QtQuick.Shapes 1.0
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    // Column{
    //     anchors.centerIn: parent
    //     spacing: 10
    // Image {
    //     width:40
    //     height:40
    //      source: "D:\\qtdown\\project\\qml\\QMLstudyOIP-C.jfif"
    //      fillMode: Image.Pad
    // }
    // Image {
    //     width:40
    //     height:40
    //      source: "D:\qtdown\project\qml\QMLstudyOIP-C.jfif"
    //      fillMode: Image.PreserveAspectFit
    // }
    // Image {
    //     width:40
    //     height:40
    //      source: "D:\qtdown\project\qml\QMLstudyOIP-C.jfif"
    //      fillMode: Image.Tile
    // }
    // Image {
    //     width:40
    //     height:40
    //      source: "D:\qtdown\project\qml\QMLstudyOIP-C.jfif"
    //      fillMode: mage.PreserveAspectCrop
    // }


    // }
    // Rectangle{
    //     id:rect
    //     width:400
    //     height:300
    //     color:"yellow"
    //     border.color: "purple"
    //     border.width: 10
    //    Column{
    //        anchors.centerIn: parent
    //        spacing: 3
    //        Rectangle{
    //            width:20
    //            height:30
    //            color:"red"
    //            border.color: "blue"
    //            border.width: 1
    //        }
    //        Rectangle{
    //            width:20
    //            height:30
    //            color:"red"
    //            border.color: "blue"
    //            border.width: 1
    //        }           Rectangle{
    //            width:20
    //            height:30
    //            color:"red"
    //            border.color: "blue"
    //            border.width: 1
    //        }           Rectangle{
    //            width:20
    //            height:30
    //            color:"red"
    //            border.color: "blue"
    //            border.width: 1
    //        }
    //    }
    //    Text {
    //        anchors.top: rect.top
    //        anchors.topMargin: 50
    //        text: qsTr("hellow world")
    //        font.family: "宋体"
    //        font.bold: true
    //        font.pixelSize: 20
    //        color:"green"
    //    }
    // }

    // Button{
    //     id:btn
    //     width:100
    //     height:50
    //     text:"点击"
    //     icon.source:"/OIP-C.JPG"
    //       icon.color:"transparent"
    //     onClicked: {console.log("点击了");

    //     }
    // }
    // BusyIndicator{
    //     id:mybusyIndicator
    //     anchors.centerIn: parent
    //     implicitHeight: 200
    //     implicitWidth: 200
    //     contentItem: Item {//指示器的规则，内容要加入Item中
    //         Rectangle{//遮罩矩形
    //             id:myrect
    //             width: parent.width
    //             height: parent.height
    //             color: Qt.rgba(0,0,0,0);//透明色，只有边框可见
    //             radius: width/2;
    //            border.width: width/15 // 数字越大圆圈越小，边框必须在，且为黑色
    //            //border.color: Qt.rgba(0,0,0,0);
    //             visible: true; // 边框是否可见，但是永远存在黑色边框
    //         }

    //         ConicalGradient{//锥形渐变效果
    //             width: myrect.width//生成一个与矩形同等大小的渐变矩形
    //             height: myrect.height

    //             gradient: Gradient{//更改渐变矩形的颜色
    //                 GradientStop {position: 0.0;color:"red"} //圆圈颜色
    //                 GradientStop {position: 1.0;color:"blue"} // 跟踪圆圈旋转后面的颜色
    //             }
    //              source: myrect//使用myrect作为遮罩，限制渐变效果在圆形区域内
    //          Rectangle{
    //              anchors.top:parent.top
    //              anchors.horizontalCenter: parent.horizontalCenter//水平居中对齐在指示器的中间
    //              width:myrect.border.width//矩形边框大小
    //              height:width
    //              radius:width/2
    //              color:"green"
    //          }
    //          //旋转动画
    //          RotationAnimation on rotation{

    //              from:0
    //              to:360
    //              duration: 5000
    //              loops: Animation.Infinite // 循环
    //          }

    //         }
    //     }

    // }
    // Text靠最上边，水平居中
    // Text{
    //     id:mytext
    //     x:50
    //     y:50

    //     anchors.horizontalCenter: parent.horizontalCenter;

    //    anchors.topMargin: 200

    //     text:"零声教育--Qt开发课程";
    //     color: "blue";
    //     font.pixelSize: 25; //像素大小
    // }

    // // 矩形
    // Rectangle{
    //     id:myrect
    //     x:50
    //     y:100
    //     anchors.left: mytext.left

    //     width: 300
    //     height: 100
    //     color: "cyan"; // 矩形填充颜色
    //     border.width: 10; // 矩形边框粗细程度
    //     border.color: "orange"; // 矩形边框颜色
    //     radius: 10; // 圆角

    //     TextInput{
    //         id:mynumber;
    //         width: 300
    //         height: 45;
    //         focus: true; // 给矩形设置焦点
    //         x:15;
    //         y:15;
    //     }
    // }

    // // 显示图像
    // Image {
    //     x:50;
    //     y:300;

    //     anchors.horizontalCenter: mytext.horizontalCenter;
    //     anchors.top: myrect.bottom;
    //     anchors.topMargin: 20;

    //     width: 500;
    //     height: 300;

    //     source: "/OIP-C.JPG";
    //     fillMode: Image.PreserveAspectFit; // 按照比例填充，不会变形


    // }
    Flow{//根据窗口变化可以重新排列
        anchors.fill:parent
        spacing: 20 // 设置行与行之间的间距
          anchors.margins: 50//所有方向的边距距离
        Rectangle{color:"green";width: 40;height: 40 }
        Rectangle{color:"red";width: 40;height: 40 }
        Rectangle{color:"blue";width: 40;height: 40 }
        Rectangle{color:"cyan";width: 40;height: 40 }
        Rectangle{color:"orange";width: 40;height: 40 }
        Rectangle{color:"black";width: 40;height: 40 }
        Rectangle{color:"green";width: 40;height: 40 }
        Rectangle{color:"red";width: 40;height: 40 }
        Rectangle{color:"blue";width: 40;height: 40 }
        Rectangle{color:"cyan";width: 40;height: 40 }
        Rectangle{color:"orange";width: 40;height: 40 }
        Rectangle{color:"black";width: 40;height: 40 }
        Rectangle{color:"green";width: 40;height: 40 }
        Rectangle{color:"red";width: 40;height: 40 }
        Rectangle{color:"blue";width: 40;height: 40 }
        Rectangle{color:"cyan";width: 40;height: 40 }
        Rectangle{color:"orange";width: 40;height: 40 }
        Rectangle{color:"black";width: 40;height: 40 }
        Rectangle{color:"green";width: 40;height: 40 }
        Rectangle{color:"red";width: 40;height: 40 }
        Rectangle{color:"blue";width: 40;height: 40 }
        Rectangle{color:"cyan";width: 40;height: 40 }
        Rectangle{color:"orange";width: 40;height: 40 }
        Rectangle{color:"black";width: 40;height: 40 }
        Rectangle{color:"green";width: 40;height: 40 }
    }
    Grid{
          anchors.centerIn: parent //  填充方式
        spacing: 20 // 设置行与行之间的间距
        columns:6
        Rectangle{color:"green";width: 40;height: 40 }
        Rectangle{color:"red";width: 40;height: 40 }
        Rectangle{color:"blue";width: 40;height: 40 }
        Rectangle{color:"cyan";width: 40;height: 40 }
        Rectangle{color:"orange";width: 40;height: 40 }
        Rectangle{color:"black";width: 40;height: 40 }
        Rectangle{color:"green";width: 40;height: 40 }
        Rectangle{color:"red";width: 40;height: 40 }
        Rectangle{color:"blue";width: 40;height: 40 }
        Rectangle{color:"cyan";width: 40;height: 40 }
        Rectangle{color:"orange";width: 40;height: 40 }
        Rectangle{color:"black";width: 40;height: 40 }
        Rectangle{color:"green";width: 40;height: 40 }
        Rectangle{color:"red";width: 40;height: 40 }
        Rectangle{color:"blue";width: 40;height: 40 }
        Rectangle{color:"cyan";width: 40;height: 40 }
        Rectangle{color:"orange";width: 40;height: 40 }
        Rectangle{color:"black";width: 40;height: 40 }
        Rectangle{color:"green";width: 40;height: 40 }
        Rectangle{color:"red";width: 40;height: 40 }
        Rectangle{color:"blue";width: 40;height: 40 }
        Rectangle{color:"cyan";width: 40;height: 40 }
        Rectangle{color:"orange";width: 40;height: 40 }
        Rectangle{color:"black";width: 40;height: 40 }
        Rectangle{color:"green";width: 40;height: 40 }
    }



}
